<template>
  <div class="chart-content-wrapper chart-content-wrapper1" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="reportName" ref="topFilter" :isShowHelp="isShowHelp" :helpContent="helpText">
      <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filterN" type="planArea"></double-check-filter>
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="chooseYear">
      </single-list-filter-without-cb>
    </top-filter>
    <div class="chart-container half-chart-container" v-show="isShowChart">
      <div id="myChart10" class="chart-type1" style="width:100%;height:100%;margin:0 auto;"></div>
      <!--<Summarize :showSummarizeText="conclusion"></Summarize>-->
    </div>
  </div>
</template>

<script>
  import {setChartHeight,loadingOpt} from '../../../assets/js/utils.js'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import {getPensionOutComponent} from "../../../api/api";
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  export default {
    props: ['isChange','filter'],
    components: {
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb
    },
    data () {
      return {
        filterN: JSON.parse(JSON.stringify(this.filter)),
        conclusion:'',
        areaCode:null,
        queryYear:this.filter.years[0],
        json:{},
        reportName:'养老支出构成',
        isShowChart:true,
        height:400,
        isShowHelp:true,
        helpText:'医保大数据平台'
      }
    },
    mounted(){
      let areaCode = []
      this.filter.nc.planArea.map((item,index)=>{
        if(index>0&&index<=6){
          areaCode.push(item.selectId)
        }
      })
      this.areaCode = areaCode.join(',');
      setChartHeight();
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('myChart10') ,null, {renderer: 'canvas'})
      this.getData();
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          setChartHeight();
          setTimeout(()=>{
            this.myChart.resize();
          },1)
        },111)
      }
    },
    methods:{
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      },
      getData(){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.myChart.clear();
          //给echart 加loading效果
          this.myChart.showLoading(loadingOpt);
          getPensionOutComponent('person/pensionOutComponent',this.areaCode, this.queryYear).then(response=>{
            let json = response.data;
            if(response.code===0){
              this.isShowChart = true;
              this.myChart.hideLoading();
              this.drawLine(json.datas);
              this.reportName = json.title;
              if(json.tip){
                this.isShowHelp = true;
                this.helpText = json.tip;
              }else{
                this.isShowHelp = false;
              }
              // this.reportName = json.reportName;
            }else{
              this.isShowChart = false;
            }
          }).catch(res=>{
            this.isShowChart = false;
          })
        },300)
      },
      chooseYear(year){
        this.queryYear = year;
        this.getData();
        //选择年份后执行事件
      },
      planAreaSelect(filter){
        //统筹区选择
        this.areaCode = filter.join(',')
        this.getData();
      },
      hospLevelSelect(filter){
        //医院级别选择
        this.hospLevel = filter.join(',');
        this.getData();
      },
      drawLine(json) {
        this.myChart.hideLoading()
        let type = [];
        let ratio = []
        let money = []
        json.map((item,index)=>{
          type.push(item.type)
          ratio.push(item.ratio)
          let data = {}
          if(item.amount/10000>1){
            data.value = Number((item.amount/10000).toFixed(2))
            data.key = '万元'
          }else{
            data.value = item.amount
            data.key = '元'
          }
          money.push(data)
        })
        this.myChart.setOption({
          grid:{
            bottom:35,
            to:10,
            left:100,
            right:60
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            show:true,
            formatter: function (params) {
              let index = params[0].dataIndex;
              let txt = `<p>养老支出构成</p>`
                +`<p>年份：${json[index].year}</p>`
                +`<p>类型：${json[index].type}</p>`
                +`<p>金额：${money[index].value}${money[index].key}</p>`
                +`<p>占总支出的比例：${json[index].ratio}%</p>`
              return txt;
            },
            textStyle: {
              lineHeight: 56,
              fontSize:12
            },
          },
          xAxis: {
            data: type,
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
          },
          color: ['#32fcf2'],
          series: [{
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '-100%',
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label:{
              show:true,
              position:'top',
              formatter:'{c}%',
              color:'#fff'
            },
            itemStyle: {
              normal: {
                opacity: 0.6
              },
              emphasis: {
                opacity: 1
              }
            },
            data: ratio,
            z: 10
          }]
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  .chart-content-wrapper1{
    background: url('../../../assets/img/noData.png') no-repeat center 60%;
    background-size: 12%;
  }
</style>
